<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>sql执行次数统计</title>
		<meta name="description" content="Common form elements and layouts" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet" href="../assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="../assets/css/ace-rtl.min.css" />
		<link rel="stylesheet" href="../assets/css/amaran.min.css" />
		<script type="text/javascript" src="../plugins/echarts/jquery-2.2.3.min.js"></script>
		<script type="text/javascript" src="../plugins/echarts/echarts.js"></script>
		<!-- 引入 主题 -->
		<script type="text/javascript" src="../plugins/echarts/macarons.js"></script>
		<script src="../assets/js/ace-extra.min.js"></script>
	</head>

	<body>
		<td>&nbsp;&nbsp;<i class="ace-icon fa blue">选择时间范围：</i></td>
		<td><input id="starttimeInput" type="date" name="time" onchange="loadOneColumn()"></td>
		<td><i class="ace-icon fa black">至</i></td>
		<td><input id="endtimeInput" type="date" name="time" onchange="loadOneColumn()"> </td>

		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 700px;height:400px;position: absolute;left: 20%;"></div>
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
		</script>
		<script src="../assets/js/bootstrap.min.js"></script>
		<script src="../assets/js/excanvas.min.js"></script>
		<script src="../assets/js/jquery-ui.custom.min.js"></script>
		<script src="../assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="../assets/js/chosen.jquery.min.js"></script>
		<script src="../assets/js/spinbox.min.js"></script>
		<!-- ace scripts -->
		<script src="../assets/js/ace-elements.min.js"></script>
		<script src="../assets/js/ace.min.js"></script>
		<script src="../assets/js/a-my-common.js"></script>
		<script src="../assets/js/jquery.amaran.min.js"></script>
		<script type="text/javascript">
			function getNowFormatDate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				
				var oneweekdate = new Date(date-7*24*3600*1000);
		        var yearweek = oneweekdate.getFullYear();
		        var monthweek = oneweekdate.getMonth()+1;
		        var dayweek = oneweekdate.getDate();
				
				if((month >= 1 && month <= 9)||(monthweek >= 1 && monthweek <= 9)) {
					month = "0" + month;
					monthweek = "0" + monthweek;
				}
				if((day >= 0 && day <= 9)||(dayweek >= 0 && dayweek <= 9)) {
					day = "0" + day;
					
				}
				var currentdate = year + seperator1 + month + seperator1 + day ;
				var frontdate = yearweek + seperator1 + monthweek + seperator1 + dayweek ;
				var mydates=new Array(frontdate,currentdate);
				var startTime = $('#starttimeInput').val() + " 00:00:00"; //获取值
				var endTime = $('#endtimeInput').val() + " 23:59:59"; //获取值
				if(startTime == " 00:00:00" && endTime == " 23:59:59") {
//					var dates = getNowFormatDate();
					document.getElementById("starttimeInput").value = mydates[0];
					document.getElementById("endtimeInput").value = mydates[1];
					startTime = mydates[0]+ " 00:00:00";
					endTime = mydates[1]+ " 23:59:59";
				}
				var Dates=new Array(startTime,endTime);
				return Dates;
			}

			function loadOneColumn() {
				var dates = getNowFormatDate();
				var startTime = dates[0];
				var endTime = dates[1];
				
				var myChart = echarts.init(document.getElementById('main'), 'macarons');
				// 显示标题，图例和空的坐标轴
				myChart.setOption({
					title: {
						text: 'sql运行次数统计'
					},
					tooltip: {
						extraCssText: 'width:400px;white-space:pre-wrap', //额外附加到浮层的 css 样式 ;pre-wrap:保留空白符序列，可是正常地进行换行。
						trigger: 'axis', 
						position:function(p){return [p[0] + 10, p[1] - 10]; },
					},
					legend: {
						data: ['次数']
					},
					toolbox: {
						show: true,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar'],
								option: {
									funnel: {
										x: '25%',
										width: '50%',
										funnelAlign: 'left',
										max: 1548
									}
								}
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},

					grid: {
						left: '10%',
						bottom: '15%' //datazoom与横坐标的间的设置
					},
					xAxis: {
						data: [],
						show: false,
					},
					yAxis: {},
					dataZoom: [{
							show: true,
							start: 0,
							end: 20,
							textStyle: false,
						},
						{
							type: 'inside',
							start: 40,
							end: 60
						},
						{ //纵向滚轴
							show: true,
							yAxisIndex: 0,
							filterMode: 'empty',
							width: 30,
							height: '80%',
							showDataShadow: false,
							left: '93%'
						}
					],
					series: [{
						name: '次数',
						type: 'bar',
						data: [],
						barCategoryGap: '50%'
					}]
				});
				myChart.showLoading();
				var names = [];
				var nums = [];
				var mouth_value = [];
				$.ajax({
					url: URL_TABLES + "/rapi?operFlag=queryNumbers&startTime=" + startTime + '&endTime=' + endTime,
					type: "get",
					async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
					data: {},
					dataType: "json",
					success: function(result) {

						if(result) {
							var datas = result.root;

							for(var i = 0; i < datas.length; i++) {
								for(var i = 0; i < datas.length; i++) {
									names.push(datas[i].META_EXE_SQL); //挨个取出类别并填入类别数组
								}
								for(var i = 0; i < datas.length; i++) {
									nums.push(datas[i].Meta_Count); //挨个取出销量并填入销量数组
								}
							}
							/*if(!names.length) {
								alert("您输入的日期有误，请重新键入！");
							}*/
							myChart.hideLoading(); //隐藏加载动画
							myChart.setOption({ //加载数据图表
								xAxis: {
									data: names,
								},
								series: [{
									// 根据名字对应到相应的系列
									name: '次数', //对应图例
									data: nums
								}]
							});
						} else {
							alert("请重新键入！");
						}
					},
					error: function(errorMsg) {
						alert("图表请求数据失败!" + errorMsg);
					},
				});
			};
			loadOneColumn();
		</script>
	</body>
</html>